<template>
    <view class="logoBox">
        <image src="https://www.yongshantuan.cn/images/yongshan/logo.png" mode="" class="logo"></image>
        <view class="telBox">
            <u-input type="text" placeholder="姓名" v-model="nameTakingMeal" :clearable="false"></u-input>
        </view>
        <view class="codeBox">
            <u-input type="text" placeholder="电话 " v-model="phoneTakingMeals" :clearable="false"></u-input>
        </view>
        <view class="commenButton" @click="submit">登录</view>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
import {
    companyMemberLogin
} from '@/utils/req/api.js'
export default {
    data() {
        return {
            hasSendCode: false,
            num: 60,
            timer: '',
            nameTakingMeal: '',
            phoneTakingMeals: '',
        }
    },
    methods: {
        async submit() {
            if (!this.nameTakingMeal) {
                this.$showToast.call(this, '请输入姓名', 'warning');
                return;
            }
            if (!this.phoneTakingMeals) {
                this.$showToast.call(this, '请输入手机号', 'warning');
                return;
            }
            let res = await companyMemberLogin({
                phoneTakingMeals: this.phoneTakingMeals,
                nameTakingMeal: this.nameTakingMeal,
                companyId: uni.getStorageSync('companyId')
            });
            console.log('登录结果', res);
            if (res.data.success) {
                this.$showToast.call(this, '登录成功')
                uni.setStorageSync('myInfo', res.data.result)
                console.log("uni.setStorageSync('myInfo')", uni.getStorageSync('myInfo'));
                uni.setStorageSync('token', res.data.result.token)
                uni.setStorageSync('hasCompanyLogin', true)
                uni.redirectTo({ url: '/pages/order' })
            } else {
                this.$showToast.call(this, '信息错误，请确认您的信息', 'warning')
            }
        }
    },
    onUnload() {
        clearInterval(this.timer)
    }
}
</script>

<style lang="scss" scoped>
.logoBox {
    background-color: #fff;
    @include flexs(center, center);
    flex-direction: column;
    min-height: 100vh;
    padding: 0 40rpx;

    .logo {
        width: 150rpx;
        height: 150rpx;
        margin-bottom: 50rpx;
    }

    .telBox,
    .codeBox {
        width: 100%;
        margin: 20rpx 0;
        background-color: #ECECEC;
        border-radius: 100rpx;
        padding: 5rpx 0;
    }

    .codeBox {
        position: relative;

        .getCode {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 28rpx;
            line-height: 28rpx;
            min-width: 30%;
            max-width: 50%;
            height: 100%;
            @include flexs(center, center);
            color: #FA690A;
            padding-right: 20rpx;
        }

        .dis {
            color: rgba(0, 0, 0, 0.35);
        }
    }

    .commenButton {
        padding: 20rpx 0;
        background-color: #FA690A;
        margin-top: 40rpx;
    }
}
</style>
<style lang="scss">
.telBox,
.codeBox {
    .u-input {
        border: 1px solid red;
        border-color: rgba(0, 0, 0, 0) !important;
        text-indent: 40rpx;
        color: rgba(0, 0, 0, 0.35);
        line-height: 2;
        font-size: 28rpx !important;
    }


    /deep/ .u-input__input {
        font-size: 28rpx;
    }
}

.codeBox {
    // .u-input {
    // 	width: 50%;
    // 	.uni-input-wrapper{
    // 		width: 100%;
    // 	}
    // }
}
</style>
